<%
	render("views.layouts.head")
	render("views.layouts.navbar")
%>

<h1><%= head_title %></h1>

<%
	if message then
		for index,text in ipairs(message) do
%>
			<p><mark><%= text %></mark></p>
<%
		end
	end
%>

<form method="POST" action="<%= url_for("edit_profile") %>" enctype="multipart/form-data">
	<fieldset>
		<legend>Perfil</legend>
		<input type="hidden" name="csrf_token" value="<%= csrf_token %>">
		<div>
			<div>
				<label for="avatar"><b>Editar imagen de perfil</b></label>
			</div>
			<div>
				<img src="<%= profile.avatar_file %>" alt="User avatar" width="8%">				
			</div>
			<div>
				<input type="file" id="avatar" name="avatar" accept="<%= valid_image_formats %>">
			</div>
		</div>
		<div>
			<div>
				<label for="background"><b>Editar fondo de perfil</b></label>
			</div>
			<div>
				<img src="<%= profile.background_file %>" alt="User background" width="32%">
			</div>
			<div>
				<input type="file" id="background" name="background" accept="<%= valid_image_formats %>">
			</div>
		</div>
		<div>
			<div>
				<label for="description"><b>Descripción</b></label>
			</div>
			<div>
				<textarea id="description" name="description" minlength="1" maxlength="255" rows="5" cols="51"><% if profile.description then %><%= profile.description %><% end %></textarea>
			</div>
		</div>
	</fieldset>
	<fieldset>
		<legend>Datos personales</legend>
		<div>
			<label for="name"><b>Nombre completo</b></label>
			<input type="text" id="name" name="name" minlength="5" maxlength="255" value="<%= profile.name %>">
		</div>
		<div>
			<label for="username"><b>Apodo</b></label>
			<input type="text" id="username" name="username" minlength="1" value="<%= profile.username %>" maxlength="255">
		</div>
		<div>
			<label for="password"><b>Nueva constraseña</b></label>
			<input type="password" id="password" name="password" minlength="6" maxlength="255">
		</div>
		<div>
			<label for="password_confirm"><b>Confirmar contraseña</b></label>
			<input type="password" id="password_confirm" name="password_confirm" minlength="6" maxlength="255">
		</div>
	</fieldset>
	<div>
		<input type="submit" name="submit" value="Guardar">
	</div>
</form>

<% render("views.layouts.footer") %>